<template>
	<view class="chat-list-page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-tabs">
				<view class="nav-item" :class="{active: activeTab === 'chat'}" @click="switchTab('chat')">
					<text class="nav-text">聊天</text>
					<view class="red-dot" v-if="chatUnreadCount > 0"></view>
				</view>
				<view class="nav-item" :class="{active: activeTab === 'interaction'}" @click="switchTab('interaction')">
					<text class="nav-text">互动</text>
					<view class="red-dot" v-if="interactionUnreadCount > 0"></view>
				</view>
			</view>
			<view class="header-actions">
				<view class="action-btn notification-btn">
					<text class="icon">🔔</text>
				</view>
				<view class="action-btn settings-btn">
					<text class="icon">⚙️</text>
				</view>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-section">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input class="search-input" 
					   type="text" 
					   placeholder="搜索联系人、公司、聊天记录" 
					   v-model="searchKeyword"
					   @input="onSearchInput"/>
			</view>
		</view>

		<!-- 筛选标签 -->
		<view class="filter-tabs">
			<view class="filter-item" 
				  :class="{active: filterType === 'all'}" 
				  @click="switchFilter('all')">
				<text class="filter-text">全部</text>
			</view>
			<view class="filter-item" 
				  :class="{active: filterType === 'greeting'}" 
				  @click="switchFilter('greeting')">
				<text class="filter-text">新招呼</text>
				<view class="filter-count" v-if="greetingCount > 0">{{ greetingCount }}</view>
			</view>
			<view class="filter-item" 
				  :class="{active: filterType === 'communication'}" 
				  @click="switchFilter('communication')">
				<text class="filter-text">仅沟通</text>
				<view class="filter-count" v-if="communicationCount > 0">{{ communicationCount }}</view>
			</view>
			<view class="filter-item" 
				  :class="{active: filterType === 'exchange'}" 
				  @click="switchFilter('exchange')">
				<text class="filter-text">有交换</text>
			</view>
		</view>

		<!-- 消息列表 -->
		<view class="conversation-list">
			<!-- 聊天会话项 -->
			<view class="conversation-item" 
				  v-for="conversation in filteredConversations" 
				  :key="conversation.conversationId" 
				  @click="goToChat(conversation)">
				<!-- 头像区域 -->
				<view class="avatar-container">
					<image class="avatar" 
						   src="/static/images/default-avatar.png" 
						   mode="aspectFill"></image>
					<view class="unread-badge" v-if="conversation.unreadCount > 0">
						<text class="unread-text">{{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}</text>
					</view>
				</view>

				<!-- 消息内容区域 -->
				<view class="content-area">
					<view class="top-row">
						<view class="user-info">
							<text class="username">{{ conversation.username }}</text>
							<text class="company-info">{{ conversation.companyName }} | {{ conversation.position }}</text>
							<text class="salary-range">{{ conversation.salaryRange }}</text>
						</view>
						<text class="message-time">{{ formatTime(conversation.lastMessageTime) }}</text>
					</view>
					<view class="message-preview">
						<text class="message-status" v-if="conversation.messageStatus">[{{ conversation.messageStatus }}]</text>
						<text class="message-text">{{ conversation.lastMessage }}</text>
					</view>
				</view>
			</view>

			<!-- 历史分割线 -->
			<view class="history-divider" v-if="showHistoryDivider">
				<text class="divider-text">以上是30天内的联系人</text>
			</view>

			<!-- 加载更多提示 -->
			<view class="load-more" v-if="loading">
				<text class="load-text">加载中...</text>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="filteredConversations.length === 0 && !loading">
				<text class="empty-text">暂无消息</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
	name: 'ChatList',
	data() {
		return {
			activeTab: 'chat',
			filterType: 'all',
			searchKeyword: '',
			refreshing: false,
			loading: false,
			showHistoryDivider: false,
			chatUnreadCount: 2,
			interactionUnreadCount: 0,
			greetingCount: 5,
			communicationCount: 2,
			mockConversations: [
				{
					conversationId: '1',
					username: '钟忆',
					companyName: '广州如是纵横科技服务',
					position: 'Java',
					salaryRange: '13-15K',
					avatar: '/static/avatar1.png',
					lastMessage: '[动画表情]',
					lastMessageTime: '2024-09-25 09:47',
					unreadCount: 2,
					messageStatus: '',
					type: 'communication'
				},
				{
					conversationId: '2',
					username: '唐恒',
					companyName: '中建三局',
					position: 'Java',
					salaryRange: '15-30K·16薪',
					avatar: '/static/avatar2.png',
					lastMessage: '您好，我想和您沟通下这个职位的相关信息',
					lastMessageTime: '2024-09-06',
					unreadCount: 0,
					messageStatus: '已读',
					type: 'greeting'
				},
				{
					conversationId: '3',
					username: '徐先生',
					companyName: '微视长信',
					position: 'Java',
					salaryRange: '10-15K',
					avatar: '/static/avatar3.png',
					lastMessage: '您好，我想和您沟通下这个职位的相关信息',
					lastMessageTime: '2024-09-02',
					unreadCount: 0,
					messageStatus: '送达',
					type: 'greeting'
				},
				{
					conversationId: '4',
					username: '余先生',
					companyName: '广东经阳科技有限公司',
					position: 'Java',
					salaryRange: '12-15K',
					avatar: '/static/avatar4.png',
					lastMessage: '对不起，我觉得该职位不太适合您',
					lastMessageTime: '2024-08-29',
					unreadCount: 0,
					messageStatus: '已读',
					type: 'communication'
				}
			]
		}
	},
	computed: {
		...mapState('chat', ['conversationList', 'unreadCount']),
		...mapGetters('chat', ['conversationList']),
		
		filteredConversations() {
			let conversations = this.conversationList.length > 0 ? this.conversationList : this.mockConversations
			
			if (this.filterType !== 'all') {
				conversations = conversations.filter(conv => conv.type === this.filterType)
			}
			
			if (this.searchKeyword.trim()) {
				conversations = conversations.filter(conv => 
					conv.username.includes(this.searchKeyword) ||
					conv.companyName.includes(this.searchKeyword) ||
					conv.lastMessage.includes(this.searchKeyword)
				)
			}
			
			return conversations
		}
	},
	onLoad() {
		this.initPage()
	},
	onShow() {
		this.refreshConversations()
	},
	methods: {
		...mapActions('chat', ['getConversationList', 'connectWebSocket']),
		
		async initPage() {
			try {
				this.loading = true
				this.connectWebSocket()
				await this.getConversationList()
			} catch (error) {
				console.error('初始化聊天列表失败:', error)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		async refreshConversations() {
			try {
				await this.getConversationList()
			} catch (error) {
				console.error('刷新会话列表失败:', error)
			}
		},
		
		async onRefresh() {
			this.refreshing = true
			try {
				await this.refreshConversations()
			} finally {
				this.refreshing = false
				uni.stopPullDownRefresh()
			}
		},
		
		loadMore() {
			console.log('加载更多会话')
		},
		
		switchTab(tab) {
			this.activeTab = tab
			this.filterType = 'all'
			this.searchKeyword = ''
		},
		
		switchFilter(type) {
			this.filterType = type
		},
		
		onSearchInput() {
			console.log('搜索:', this.searchKeyword)
		},
		
		goToChat(conversation) {
			uni.navigateTo({
				url: `/pages/chat/detail?conversationId=${conversation.conversationId}&username=${conversation.username}`
			})
		},
		
		formatTime(timeStr) {
			if (!timeStr) return ''
			
			const now = new Date()
			const time = new Date(timeStr)
			const diff = now.getTime() - time.getTime()
			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
			
			if (days === 0) {
				return time.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
			} else if (days === 1) {
				return '昨天'
			} else if (days < 30) {
				return time.toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' })
			} else {
				return time.toLocaleDateString('zh-CN')
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.chat-list-page {
	background-color: #f8f9fa;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 顶部导航栏 */
.header {
	background: linear-gradient(135deg, #a8e6cf 0%, #dcedc8 100%);
	padding: 20rpx 30rpx;
	padding-top: calc(var(--status-bar-height, 44px) + 20rpx);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-tabs {
	display: flex;
	gap: 40rpx;
}

.nav-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.nav-text {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	
	.nav-item.active & {
		color: #000;
	}
}

.red-dot {
	width: 16rpx;
	height: 16rpx;
	background-color: #ff4757;
	border-radius: 50%;
	position: absolute;
	top: -5rpx;
	right: -15rpx;
}

.header-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	width: 60rpx;
	height: 60rpx;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10rpx);
}

.icon {
	font-size: 24rpx;
}

/* 搜索框 */
.search-section {
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.search-box {
	background-color: #f5f6fa;
	border-radius: 20rpx;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.search-icon {
	font-size: 28rpx;
	color: #999;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	background: transparent;
	border: none;
	outline: none;
	
	&::placeholder {
		color: #999;
	}
}

/* 筛选标签 */
.filter-tabs {
	background-color: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	gap: 40rpx;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}

.filter-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.filter-text {
	font-size: 28rpx;
	color: #666;
	
	.filter-item.active & {
		color: #000;
		font-weight: 500;
	}
}

.filter-count {
	background-color: #ff4757;
	color: #fff;
	border-radius: 10rpx;
	padding: 2rpx 8rpx;
	font-size: 20rpx;
	min-width: 32rpx;
	height: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 会话列表 */
.conversation-list {
	flex: 1;
	padding: 20rpx;
	padding-bottom: 40rpx;
	box-sizing: border-box;
}

.conversation-item {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	display: flex;
	gap: 24rpx;
	align-items: flex-start;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	position: relative;
	
	&:first-child {
		margin-top: 0;
	}
	
	&:active {
		background-color: #f8f9fa;
	}
}

/* 头像区域 */
.avatar-container {
	position: relative;
	flex-shrink: 0;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: #ddd;
}

.unread-badge {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	background-color: #ff4757;
	border-radius: 20rpx;
	min-width: 36rpx;
	height: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2rpx solid #fff;
}

.unread-text {
	font-size: 20rpx;
	color: #fff;
	font-weight: 600;
	padding: 0 8rpx;
}

/* 内容区域 */
.content-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.top-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20rpx;
}

.user-info {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 16rpx;
	flex-wrap: wrap;
}

.username {
	font-size: 30rpx;
	font-weight: 600;
	color: #000;
}

.company-info {
	font-size: 24rpx;
	color: #666;
}

.salary-range {
	font-size: 24rpx;
	color: #666;
}

.message-time {
	font-size: 22rpx;
	color: #999;
	flex-shrink: 0;
}

.message-preview {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.message-status {
	font-size: 22rpx;
	color: #999;
	flex-shrink: 0;
}

.message-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.4;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 历史分割线 */
.history-divider {
	padding: 40rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.divider-text {
	font-size: 24rpx;
	color: #999;
	background-color: #f8f9fa;
	padding: 0 20rpx;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		left: -200rpx;
		top: 50%;
		width: 180rpx;
		height: 1rpx;
		background-color: #eee;
	}
	
	&::after {
		content: '';
		position: absolute;
		right: -200rpx;
		top: 50%;
		width: 180rpx;
		height: 1rpx;
		background-color: #eee;
	}
}

/* 加载状态 */
.load-more {
	padding: 40rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.load-text {
	font-size: 24rpx;
	color: #999;
}

/* 空状态 */
.empty-state {
	padding: 100rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style>